<link rel="stylesheet" href="../core/resource/components/swiper/swiper.min.css?v=3">
<style>
.headinfo .child.userinfo .face {
    border: 0.1rem solid #fff; 
}
.bottombg {bottom:-20px;width:100%;height:11rem;border-bottom-right-radius:100% 40px;border-bottom-left-radius:100% 40px;}
.mod-group {
    margin: 0 auto;
	margin-top: 0;
    padding:0.5rem;
}
.fui-icon-group .fui-icon-col-sm {
    margin:10px 0;
}
.subtitle {
    font-size: 0.7rem;
}
.badge {
    left: 2rem;
    top: 0;
}
.fui-page .fui-page-title {
    color:#d9d5ca;
	padding: 0.3rem 0.5rem;
}
.fui-navbar .buybtn  {padding-left:0.3rem;background:#fff}
.fee-tag-nav, .fee-tagup-nav, .fee-disabled-nav {border-radius:1rem;height:2rem;line-height:2rem;color:#704d25;width:100%;font-weight:400;font-size:0.7rem;margin:0.2rem 0;padding:0 0.5rem}
.fee-tagup {background:#e7bf82;color:#704d25;width:auto;font-weight:400;font-size:0.55rem}
.fee-tag-nav {background:#e7bf82;}
.fee-tagup-nav {background: linear-gradient(to right,#fee7c7, #f7bb7d);}
.swiper-slide {
	width:100%;
}
.fui-icon-group .fui-icon-col .text {
    height:auto;
}
.fui-icon-group .fui-icon-col .icon {
   color:#999;padding:0.5rem;font-size: 1rem;border-radius: 50%;background-color: rgba(255,255,255,0.2);
}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
    border: 1px solid #fce8c3;
    background: #fce8c3;
}
input[type="checkbox"]:checked::before,input[type="radio"]:checked::before {
    color: #704d25;
}
.fui-cell-group.active{border:2px solid red;}
.fui-cell-group.active::after{content:" ";width:23px;height:24px;background:url(../core/resource/images/gou-red.png) no-repeat;position:absolute;float:right;right:-1px;bottom:-1px;text-align:center;}

</style>
<div class='fui-page fui-page-current' ng-if="pagedata.op=='main'" style="background:#000">
<div class="fui-content" style="background:#000;padding:0.5rem;padding-bottom:4rem">
		<div ng-if="!pagedata.mygroup.groupname" class="c" style="color:#999;font-size:0.6rem">{{pagedata.tips}}</div>
		<div class="fui-cellone" style="padding:1rem 0">
				<div class="fui-cellone-label" style="width:auto;">
					<img style="border-radius: 0.2rem;width:2.2rem;height:2.2rem" ng-src="{{tomedia(pagedata.member.avatar) || '../core/resource/images/gw-user.png'}}" />
				</div>
				<div class="fui-cellone-text" style="font-size:0.7rem;color:#cdcfce;padding-left:0.5rem">
					<div class="bold">{{pagedata.member.nickname || '昵称'}} </div>
					<div ng-if="pagedata.user.groupid<=0" style="font-size:0.6rem">
						<span style="font-size:0.7rem;margin-top:0.3rem;color:#cdcfce">(未开通会员)<i class='icon icon-question' style='font-size:8px;'></i></span>
					</div>
					<div ng-if="pagedata.user.groupid>0" style="font-size:0.6rem">
					<span class="fui-tag fui-tag-danger" style="background:linear-gradient(to right,rgba(244,221,187,0.6),rgba(235,216,174,1));color:#512f0a;width:auto;font-weight:400">{{pagedata.mygroup.groupname}}</span>
					有效期:{{pagedata.user.viptime2}} 
					</div>
				</div>
		</div>
		<div class="swiper-container">
		  <div class="swiper-wrapper">
			<div ng-repeat="item in pagedata.allgroup" class="swiper-slide">
			  <div ng-class="{'fui-cell-group radius':1,'active':pagedata.nowkey==$index}" ng-click="pagedata.nowkey=$index;pagedata.nowgroup=item" style="margin-top:0;background:{{item.cssinfo.color}}">
					<div class="fui-cell">
						<div class="fui-cell-text">
							<div class="bold" style="color:#704d25">{{item.groupname}}</div>
							<div style="font-size:0.6rem;color:#937954">{{item.cssinfo.desc}}</div>
						</div>
					</div>
					<div class="fui-cell">
						<div class="fui-cell-text">
							<div class="bold" style="color:#704d25">尊享特权</div>
							<div style="font-size:0.6rem">
								<div ng-repeat="(k,v) in item.keyword" class="jylabels jylabel-f3f3f3" style="line-height:0.85rem;padding:0.2rem;background-color:#fff8ee;color:#704d25">{{v}}</div>
							</div>
						</div>
					</div>
			  </div>
			</div>
		  </div>
		</div>
		<div style="padding-top:0;margin-bottom:1rem">
			<div class="fixed-title" style="height:2rem;">
				<span class="befirst spacing">
					<span class="icon icon-fengexianzuo" style="font-size:2rem;color:#fdfdfd"></span>
				 </span> 
				<span class="title-text bold" style="color:#fdfdfd;line-height:2rem">{{pagedata.nowgroup.groupname}}专属特权</span> 
				<span class="spacing">
					 <span class="icon icon-fengexianyou" style="font-size:2rem;color:#fdfdfd"></span>
				</span>
			</div>
			<div class="radius" style="padding-bottom:0.5rem;background:#333;margin-bottom:0.5rem">
			<div class="fui-cell-title" style="color:#fdfdfd">
                营销管理
            </div>
			<div class="fui-icon-group noborder col-4" style="color:#999">
					<div ng-repeat="(k,v) in pagedata.mens1" class="fui-icon-col external" style="margin:0">
							<div class="text bold">
								<i class="icon {{v.icon || 'icon-all'}}" style="color:#f7bb7d"></i>
							</div>
							<div style="font-size:12px;color:#f7bb7d">{{v.title}}</div>
					</div>
			</div>
			</div>
			<div class="radius" style="padding-bottom:0.5rem;background:#333;margin-bottom:0.5rem">
			<div class="fui-cell-title" style="color:#fdfdfd">
                服务特权
            </div>
			<div class="fui-icon-group noborder col-4" style="color:#999">
					<div ng-repeat="(k,v) in pagedata.nowgroup.fuwus track by k" class="fui-icon-col external" style="margin:0">
							<div class="text bold">
								<i class="icon {{v.icon || 'icon-all'}}" style="color:#f7bb7d"></i>
							</div>
							<div style="font-size:12px;color:#f7bb7d">{{v}}</div>
					</div>
			</div>
			</div>
			<div class="radius" style="padding-bottom:0.5rem;background:#333">
			<div class="fui-cell-title" style="color:#fdfdfd">
                活动特权
            </div>
			<div class="fui-icon-group noborder col-4" style="color:#999">
					<div ng-repeat="(k,v) in pagedata.nowgroup.games" class="fui-icon-col external" style="margin:0">
							<div class="text bold">
								<i class="icon {{v.icon || 'icon-all'}}" style="color:#f7bb7d"></i>
							</div>
							<div style="font-size:12px;color:#f7bb7d">{{v.title}}</div>
					</div>
			</div>
			</div>
		</div>
		<div class="fui-navbar-tip overflow-h" href="javascript:" ng-click="access_json(pagedata.pluginset.kf_link);" style="color:#999;background:#444;bottom:2.8rem">联系专属顾问 >></div>
		<div class="fui-navbar" style="height:2.8rem">
			<div class="fui-cell-group" style="padding:0;margin-top:0;background:#333;">
			<div class="fui-cell sm" style="padding:0.2rem">
				<div class="fui-cell-icon" style=''>
				<input type="checkbox" ng-checked="pagedata.post.checked==true" ng-model="pagedata.post.checked" name="checkbox" class="fui-radio fui-radio-danger cartmode check-item"/>
				</div>
				<div class="fui-cell-text" style='line-height:1.2;font-size:0.7rem;color:#fce8c3'>
					<div class="text">会员用户协议</div>
					<div class="subtitle" style="font-size:0.65rem;color:#937954" ng-click="pagedata.show_xieyi=true;">查看协议详情 <i class="icon icon-tishi" style="font-size:0.65rem"></i></div>
				</div>
				<div class="fui-cell-remark noremark" style='width:auto'>
				<div class="fee-tagup-nav" ng-click="pagedata.buyvip()">
					{{pagedata.isnobuy!=1?'立即支付':'续费会员'}}￥<span class="bold">{{pagedata.nowgroup.price || '0.00'}}</span>/年
				</div>
				</div>
			</div>
			</div>
		</div>
</div>
</div>
<div ng-if="pagedata.show_xieyi" class="popup">
	<div class="popup-body">
		<div class="popup-center">
			<i class="closed icon icon-cuowu" style="font-size:1.2rem;top:105%;" ng-click="pagedata.show_xieyi=false"></i>
			<div class="content-images" style="padding:0.5rem;height:20rem; overflow-y:scroll;">
					<div class="title bold" style="font-size:0.8rem">{{pagedata.xieyi.title||'会员用户协议'}} / <small>Read Ggree</small></div>
					<div class="text" style="padding-top:0.5rem;font-size:0.7rem" ng-bind-html="trust(pagedata.xieyi.content)">
					</div>
			</div>
			<div class="modal-footer">
				<div ng-click="pagedata.show_xieyi=false;pagedata.post.checked=1" class="mod-check" style="width: 100%; margin: 0;">我已阅读</div>
			</div>
		</div>
	</div>
</div>
<script>
scope.pagedata.nowkey=0;
require(['swiper'], function (Swiper) {
		var swiper = new Swiper('.swiper-container', {
			  effect: 'coverflow',
			  grabCursor: true,
			  centeredSlides: true,
			  slidesPerView: 'auto',
			  coverflowEffect: {
				rotate: 50,
				stretch: 0,
				depth: 100,
				modifier: 1,
				slideShadows : true,
			  },
			  on: {
				 transitionEnd:function(){
					console.log(this.activeIndex);
					if(scope.pagedata.nowkey!=this.activeIndex){
						scope.pagedata.nowkey=this.activeIndex;
						scope.pagedata.nowgroup=scope.pagedata.allgroup[scope.pagedata.nowkey];
						scope.$evalAsync();
					}
				 },
			  },
		});
});
</script>
<script type="text/javascript">
//购买
scope.pagedata.buyvip=function(){
	if(!scope.pagedata.post.checked){
		scope.message('请先阅读并勾选《会员协议》','error');
		return false;
	}
	if(scope.pagedata.nowid[scope.pagedata.post.level_id]>0){
		scope.post_json('jy_quanhuo/open/pay/id='+scope.pagedata.nowid[scope.pagedata.post.level_id],{},function(pay_id){
			scope.tool.pay(pay_id,function(res){
					console.log('收到支付结果！');
					if(res.type=='success'){
						scope.message('升级成功！','',scope.pagedata.homeaction);
					}else{
						scope.message('升级失败！'+res.message);
					}
			},'','',scope.pagedata.homeaction);
		});
	}else{
		scope.pagedata.post.groupid=scope.pagedata.nowgroup.id
		scope.post_json('jy_quanhuo/open/post/',scope.pagedata.post,function(res){
			console.log('pay_id');console.log(res);
			scope.pagedata.nowid[scope.pagedata.post.level_id]=res.order_id
			scope.$evalAsync();
			scope.tool.pay(res.pay_id,function(res){
					console.log('收到支付结果！');
					if(res.type=='success'){
						scope.message('升级成功！','',scope.pagedata.homeaction);
					}else{
						scope.message('升级失败！'+res.message);
					}
			},'','',scope.pagedata.homeaction);
		});
	}
}
</script>